<template>
<el-button icon="el-icon-setting" circle @click="isSettingOpen=true" style="position:absolute;right:10px;top:10px"></el-button>
  <el-switch v-model="isReadyToShow" />
  <el-divider><i class="el-icon-star-on"></i></el-divider>
  <!-- 以上的部分测试使用 -->
  <div style="margin: 0 auto; max-width: 1000px">
    <!-- 搜索框 -->
    <el-row :gutter="20">
      <el-input
        v-model="searchInput"
        placeholder="在此键入以搜索"
        prefix-icon="el-icon-search"
        clearable
        @input="search"
      />
    </el-row>
    <!-- 内容类型 tab -->
    <div>
      <el-row :gutter="20">
        <!-- 左侧显示文件列表的位置 -->
        <el-col :span="10">
          <el-collapse v-model="activeTypes" @change="handleChange">
            <el-collapse-item title="精确匹配" name="1">
              <el-row v-for="(item, index) in searchResults" :key="index">
                <el-skeleton
                  :loading="isReadyToShow"
                  animated
                  @click="clickResult"
                >
                  <template #template>
                    <el-row>
                      <el-skeleton-item
                        variant="image"
                        style="
                          width: 40px;
                          height: 40px;
                          align-self: center;
                          margin: 0 5px;
                        "
                      />
                      <div style="padding: 14px">
                        <el-skeleton-item variant="h3" style="width: 20rem" />
                        <div
                          style="
                            display: flex;
                            align-items: center;
                            justify-items: space-between;
                            margin-top: 16px;
                            height: 16px;
                          "
                        >
                          <el-skeleton-item
                            variant="text"
                            style="margin-right: 16px"
                          />
                          <el-skeleton-item variant="text" style="width: 30%" />
                        </div>
                      </div>
                    </el-row>
                  </template>
                  <template #default>
                    <el-card
                      style="margin: 10px 0; width: 100%"
                      :body-style="{
                        padding: '0px',
                        marginBottom: '1px',
                        margin: '5px 0',
                      }"
                    >
                      <el-row style="width: 100%; flex-wrap: nowrap">
                        <img
                          :src="item.icon"
                          class="image"
                          style="
                            width: 40px;
                            height: 40px;
                            align-self: center;
                            margin: 0 5px;
                          "
                        />
                        <el-row style="flex-grow: 1">
                          <span>{{ item.name }}</span>
                          <div
                            style="
                              display: flex;
                              align-items: center;
                              justify-items: space-between;
                              margin-top: 16px;
                              height: 16px;
                              width: 100%;
                            "
                          >
                            <span style="margin: 0; margin-right: 16px">{{
                              item.date
                            }}</span>
                            <span style="width: 30%">{{ item.type }}</span>
                          </div>
                        </el-row>
                      </el-row>
                    </el-card>
                  </template>
                </el-skeleton>
              </el-row>
            </el-collapse-item>
            <el-collapse-item title="搜图片" name="2"> </el-collapse-item>
            <el-collapse-item title="搜文档" name="2"> </el-collapse-item>
          </el-collapse>
        </el-col>
        <!-- 右侧显示文件详情的位置 -->
        <el-col :span="14">
          <el-skeleton :loading="isReadyToShow" animated @click="clickResult">
            <template #template>
              <el-row>
                <el-skeleton-item
                  variant="image"
                  style="
                    width: 100px;
                    height: 100px;
                    align-self: center;
                    margin: 20px auto;
                  "
                />
              </el-row>
              <el-row>
                <el-skeleton-item
                  variant="h1"
                  style="width: 50rem align-self: center;"
                />
              </el-row>
              <br />
              <el-row style="justify-content: center">
                <el-skeleton-item variant="text" style="width: 6rem" />
              </el-row>
              <el-row>
                <el-skeleton rows="8" />
              </el-row>
            </template>
            <template #default>
              <el-card
                style="margin: 10px 0; width: 95%"
                :body-style="{
                  padding: '0px',
                  marginBottom: '1px',
                  margin: '5px 0',
                }"
              >
                <img
                  src="http://ftp.henu.gay:8081/img/logo.02e69406.png"
                  style="width: 80px; height: 80px"
                />
                <h3>文件名</h3>
                <p>图片</p>
                <el-divider></el-divider>
                <el-row>
                  <span style="width: 10rem; text-align: right">位置：</span>
                  <span>T:\search-index\node_modules\@element-plus\icons</span>
                </el-row>
                <br />
                <el-row>
                  <span style="width: 10rem; text-align: right"
                    >上次修改时间：</span
                  >
                  <span>‎2021‎年‎10‎月‎30‎日，‏‎18:31:01</span>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                  <span style="width: 10rem; text-align: right">关键字：</span>
                  <span>江泽民 苟利国家生死以</span>
                </el-row>
                <br />
                <el-row>
                  <span style="width: 10rem; text-align: right">描述：</span>
                  <span>苟利国家生死以</span>
                </el-row>
                <br />

                <el-divider></el-divider>
                <br />
                <div>
                  <el-button type="text">打开文件</el-button>
                  <br />
                  <el-button type="text">打开文件所在位置</el-button>
                  <br />
                  <el-button type="text">复制路径</el-button>
                </div>
                <br />
              </el-card>
            </template>
          </el-skeleton>
        </el-col>
      </el-row>
      <!-- 设置界面弹出框 -->
      <el-dialog
    v-model="isSettingOpen"
    title="设置"
    width="90%"
    :before-close="handleClose"
  >
    <Setting/>
    
  </el-dialog>
    </div>
    <!-- 分割线 -->
    <el-divider><i class="el-icon-star-on"></i></el-divider>
    <!-- 底部的最近项目和热门项目 -->
    <!-- <div class="demo-collapse">
      <el-collapse
        v-model="activeBottomCollapses"
        @change="bottomCollapsesClick"
      >
        <el-collapse-item title="热门" name="hot_item">
          <el-skeleton :rows="5" animated />
        </el-collapse-item>
        <el-collapse-item title="最近" name="recently_item">
          <el-skeleton :rows="5" animated />
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-row>
      <el-skeleton :rows="5" animated />
    </el-row> -->
  </div>
</template>
<script >
import Setting from './Setting.vue';
export default {
  components: { Setting },
  name: "search-index",
  data() {
    return {
      isSettingOpen:false,
      searchResults: [
        {
          name: "文件1",
          icon: "http://ftp.henu.gay:8081/img/logo.02e69406.png",
          date: "2021年10月30日",
          type: "图片",
        },
        {
          name: "文件2",
          icon: "http://ftp.henu.gay:8081/img/logo.02e69406.png",
          date: "2021年10月30日",
          type: "文件",
        },
        {
          name: "文件3文件3文件3文件3文件3",
          icon: "http://ftp.henu.gay:8081/img/logo.02e69406.png",
          date: "2021年10月30日",
          type: "文档",
        },
      ],
      originResults: [
        {
          name: "文件1",
          icon: "http://ftp.henu.gay:8081/img/logo.02e69406.png",
          date: "2021年10月30日",
          type: "图片",
        },
        {
          name: "文件2",
          icon: "http://ftp.henu.gay:8081/img/logo.02e69406.png",
          date: "2021年10月30日",
          type: "文件",
        },
        {
          name: "文件3文件3文件3文件3文件3",
          icon: "http://ftp.henu.gay:8081/img/logo.02e69406.png",
          date: "2021年10月30日",
          type: "文档",
        },
      ],
      isReadyToShow: true,
      searchInput: "",
      activeTabName: "all",
      activeBottomCollapses: ["hot_item", "recently_item"],
    };
  },
  methods: {
    filterResult(item) {
      if (this.activeTabName == "all") {
        return true;
      } else if (this.activeTabName == "pic") {
        return item.type == "图片";
      } else if (this.activeTabName == "file") {
        return item.type == "文件";
      } else if (this.activeTabName == "pic") {
        return item.type == "文档";
      }
    },
    tabClick() {
      console.log(this.activeTabName);
      this.searchResults = this.originResults.filter(this.filterResult);
    },
    bottomCollapsesClick() {
      console.log(this.activeBottomCollapses);
    },
    search() {
      this.isReadyToShow = false;
      console.log(this.searchInput);
    },
    clickResult() {},
  },
};
</script>
<style>
</style>